//商品数组
let products = [{
    id: 1001,
    name: '我和狗狗活下去',
    picture: './image/shoppingBg_03.jpg',
    price: 28.9,
    num: 1,
    singlePrice: 28.9,
    state: false
  },
  {
    id: 2002,
    name: '灰霾来了怎么办',
    picture: './image/shoppingBg_06.jpg',
    price: 38.9,
    num: 1,
    singlePrice: 38.9,
    state: false //选中状态
  }
]
//全选状态
let stateAll = false
/**
 * 全选复选
 *    给全选设置点击事件
 *      点击判断全选框的状态，设置 stateAll = !stateAll
 *      把所有复选设置为true
 */
function selectedIsAll(){
  $('table').on('click',('.checkbox-all'),function(){
    stateAll = !stateAll
    if(stateAll){
      products.map(item=>item.state=true)
    }else{
      products.map(item=>item.state=false)
    } 
    showProductList()  
  })

  $('table').on('click',('.checkbox-item'),function(){
    let id = $(this).parent().next().html()
    // console.log(id)
    let product = products.find(item=>item.id == id)
    product.state = !product.state
    // console.log(products)
    if(products.every(item => item.state==true)){
      stateAll=true
    }else{
      stateAll=false
    }
    showProductList()  
  })

}


/**
 * 显示所有商品
 *  思路: 根据商品数组数据，生成商品列表html节点字符串,将商品列表节点字符串作为内容赋值给table父节点
 */
function showProductList() {
  let str = `
      <tr>
        <th><input type="checkbox" class="checkbox-all" ${stateAll?'checked':''}></th>
        <th>序号</th>
        <th>商品图片</th>
        <th>商品信息</th>
        <th>单价</th>
        <th>数量</th>
        <th>总价</th>
        <th>操作</th>
      </tr>
    `
  products.forEach(item => {
    str += `
        <tr>
          <td> <input type="checkbox" class="checkbox-item" ${item.state?'checked':''}></td>
          <td>${item.id}</td>
          <td><img src="${item.picture}" alt="shop03"></td>
          <td>${item.name}</td>
          <td>￥${item.price}</td>
          <td><input type="button" name="minus" value="-" ${item.num==1?'disabled':''}><input type="text" name="amount" value="${item.num}"><input
                  type="button" name="plus" value="+"></td>
          <td class="sgtotleprice">￥${item.singlePrice}</td>
          <td><a href="#">移入收藏</a><br><a href="#" class="del">删除</a></td>
        </tr>
      `
  })
  $('table').html(str)
}

/**
 * 添加商品
 *   思路: 构造商品购物项数据，将商品购物项数据添加到商品数组
 *      1. 构造商品购物项数据
 *          1.1 从商品表单获取数据
 *          1.2 生成一条商品购物项数据
 *            let product = {id:3, name:'javascript高级编程', picture:'./image/book22.png', price:58.90, num:0, singlePrice:0},
 *      2. 将商品购物项数据添加到商品数组
 *          products.push(product)
 */
function addProduct() {
  let name = $('input[name="bookname"]')
  
  let price = $('input[name="bookprice"]')
  let pictureUrl = $('input[name="bookpicture"]')
  //名称非空验证
  name.on('blur',function(){
    if(!name.val()){
      $('.bookname+span').html('名称不能为空！')
    } else{
      $('.bookname+span').html('')
    }
  })
  //价格非空验证
  price.on('blur',function(){
    if(!price.val()){
      $('.bookprice+span').html('价格不能为空！')
    }else{
      $('.bookprice+span').html('')
    }
  })
  //图片地址非空验证
  pictureUrl.on('blur',function(){
    if(!pictureUrl.val()){
      $('.bookpicture+span').html('图片地址不能为空！')
    }else{
      $('.bookpicture+span').html('')
    }
  })

  //提交按钮
  $('#addbookbtn').click(function () {
    if (!name.val() || !price.val() || !pictureUrl.val()) {
      alert('名称、价格、图片地址都不能为空！')
    } else {

      let product = {
        id: getRandom(1003, 9999),
        name: name.val(),
        picture: pictureUrl.val(),
        price: price.val(),
        num: 1,
        singlePrice: price.val(),
        state:false
      }
      products.push(product)
      stateAll=false
      console.log(products)
      showProductList()
      totalPrice()
      name.val('')
      price.val('')
      pictureUrl.val('')
      
    }
  })
}

/**
 * 删除商品
 *  思路: 删除数组中指的数据.
 *      1. 找到要删除商品在数组中的索引号
 *         1.1 给删除节点添加一个自定义属性，属性值是当前商品的索引号
 *         1.2 找商品唯一id, 根据id在数组中确定该商品的索引号
 *      2. products.splice(index,1)
 */
function onProduct() {
  $('table').on('click', '.del', function () {
    // console.log($('td .del'))
    let id = $(this).parent().parent().children().next().html()
    // console.log(id)
    // console.log($(this))
    let index = products.findIndex(item => item.id == id)
    products.splice(index, 1)
    // console.log(index)
    showProductList()
    totalPrice()
    
  })
}

/**
 * 数量改变
 */
function amountChange(){
  //数量加一
  $('table').on('click','input[name="plus"]',function(){
    let id = $(this).parent().parent().children().next().html()
    let product = products.find(item=> item.id == id)
    product.num++
    product.singlePrice = (product.num*product.price).toFixed(2)
    // console.log(product);
    totalPrice()
    showProductList()
  })

  //数量减一
  $('table').on('click','input[name="minus"]',function(){
    let id = $(this).parent().parent().children().next().html()
    let product = products.find(item=> item.id == id)
    if(product.num <=1 ){
      $(this).attr('disabled','true')
    }
    product.num--
    product.singlePrice = (product.num*product.price).toFixed(2)
    // console.log(product);
    totalPrice()
    showProductList()
  })

  //手动修改数量
  $('table').on('change','input[name="amount"]',function(){
    let n = $(this).val()
    if(!n || n<1 || isNaN(n)){
      alert('请输入一个不小于1的数字值')
      n=1
    }
    let id = $(this).parent().parent().children().next().html()
    let product = products.find(item => item.id == id)
    product.num = parseInt(n)
    product.singlePrice = (product.num*product.price).toFixed(2)
    totalPrice()
    // console.log(products);
    showProductList()
  })
}

/**
 * 计算所有商品总价
 *  思路: 遍历数组，将singleprice累加
 */
function totalPrice() {
  let totleAll = 0
  products.forEach(item => {
    totleAll += parseFloat(item.singlePrice)
  })
  $('#totalPrice').html('￥' + totleAll.toFixed(2))
}

/**
 * 生成x~y之间的随机数
 * @param {*} x
 * @param {*} y
 * @returns
 */
function getRandom(x, y) {
  // 保证m是最小值,n是最大值
  var n = Math.max(x, y) // 80
  var m = Math.min(x, y) // 50
  return Math.floor(Math.random() * (n - m)) + m
}
showProductList()
addProduct()
onProduct()
totalPrice()
amountChange()
selectedIsAll()